<template>
  <div v-if="detail.data">
    <PageTitle title="订单详情"></PageTitle>
    <div class="content">
      <div class="box">
        <div>
          <h3>订单编号</h3>
          <h4>{{ detail.data.order }}</h4>
        </div>
        <div>
          <h3>收货人</h3>
          <h4>{{ detail.data.name }}</h4>
        </div>
        <div>
          <h3>微信昵称</h3>
          <h4>{{ detail.data.nickname }}</h4>
        </div>
        <div>
          <h3>联系方式</h3>
          <h4>{{ detail.data.mobile }}</h4>
        </div>
        <div>
          <h3>收货地址</h3>
          <h4>{{ detail.data.province }} {{ detail.data.city }} {{ detail.data.district }} {{ detail.data.address }}</h4>
        </div>
        <div>
          <h3>申请时间</h3>
          <h4>{{ detail.data.create_at }}</h4>
        </div>
      </div>
      <div class="box">
        <div>
          <h3>订单状态</h3>
          <template v-if="!detail.data.number">
            <h4 class="color-danger">未发货</h4>
          </template>
          <template v-else>
            <h4 class="color-theme">已发货</h4>
          </template>
        </div>
        <div>
          <h4>
            <el-button type="primary" size="small" @click="dialogExpress = true" v-if="!detail.data.number">确认发货</el-button>
            <el-button type="primary" size="small" @click="dialogProg = true" v-if="logis">查看物流</el-button>
          </h4>
        </div>
      </div>
    </div>
    <PageTitle title="商品信息"></PageTitle>
    <el-table
      stripe
      :data="detail.items"
    >
      <el-table-column
        prop="goods_name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="fication_name"
        label="品牌">
      </el-table-column>
      <el-table-column
        label="图片(视频)"
      >
        <template slot-scope="scope">
          <img v-if="!scope.row.url.endsWith('mp4')" class="list-img" :src="scope.row.url" :alt="scope.row.url" @click="handlePictureCardPreview(scope.row.url)">
          <a v-else :href="scope.row.url" target="_blank">
            <video :src="scope.row.url"></video>
          </a>
        </template>
        
      </el-table-column>
      <el-table-column
        prop="subtotal"
        label="商品价格(元)">
      </el-table-column>
      <el-table-column
        prop="open"
        label="是否开盒">
        <template slot-scope="scope">
          {{scope.row.open==2?'未开盒':'已开盒'}}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
    <el-dialog :visible.sync="dialogExpress">
      <InputLogis @close="dialogExpressClose" />
    </el-dialog>
    <el-dialog :visible.sync="dialogProg">
      <Logistics v-if="logis" :logis="logis" />
    </el-dialog>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import InputLogis from '@/components/inputLogis/InputLogis.vue'
  import Logistics from '@/components/logistics/Logistics.vue'
  export default {
    name: 'SendOrderDetail',
    components: {
      PageTitle,
      Logistics,
      InputLogis
    },
    activated() {
      this.$goTop()
      this._get()
    },
    deactivated() {
      this.$destroy()
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        dialogExpress: false,
        dialogProg: false,
        detail: [],
        tableData: [],
        logis: ''
      }
    },
    methods: {
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/deliver/details',
          method: 'GET',
          params: {
            order: this.$route.params.id
          }
        })
        if (code === 0) {
          data.data.nickname = data.nikname
          this.detail = data
          if(this.detail.data.number) {
            this.getLogistics(this.detail.data.com, this.detail.data.number)
          }
        }
      },
      async getLogistics(com, num) {
        let { data: { code, data } } = await this.$axios({
          //url: 'https://www.youjingxi.com.cn/v1/goods/expre',
          url:this.$api+'/v1/deliver/exer',
          method: 'GET',
          params: {
            com,
            // num: '3950055201640'
            num
          }
        })
        if(code === 0) {
          if (Array.isArray(data)) {
            let logisArr = data[0].data.map(item => {
              item.day = item.time.substring(5, 10)
              item.time = item.time.substring(11, 16)
              return item
            })
            this.logis = {
              com: data[0].com,
              num: data[0].nu,
              logisArr
            }
          } else {
            this.logis = data
          }
        }
      },
      dialogExpressClose() {
        this._get()
        this.dialogExpress = false
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src
        this.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .content {
    display: flex;
    margin-top: 20px;
    border: 1px solid #eee;
    .box {
      flex: 1;
      padding: 10px;
      height: 400px;
      border-right: 1px solid #eee;
      &:last-child {
        border-right: none;
      }
      div {
        display: flex;
        align-items: center;
        h3 {
          flex: 0 0 70px;
          margin: 4px;
          width: 100px;
          font-size: 14px;
          font-weight: 400;
          color: $colorInfo;
        }
        h4 {
          flex: 1;
          margin: 4px;
          font-size: 14px;
          font-weight: 400;
          &.color-danger {
            font-size: 18px;
          }
        }
      }
      .editAddress {
        margin-top: 10px;
      }
    }
  }
  .list-img, video {
     width:100px;
     height:auto;
     cursor: pointer;
  }
</style>
